import JsonEditerVue from "@/components/JsonForm/JsonEditer.vue";
import { SchemaNodeKey } from "@/utils/constants";
import { getCurrentInstance, defineComponent, ComponentInternalInstance } from "vue";
import "./json-view.scss";
import { GatewayType } from "@/api/interface/iot";
import { getProfile } from "@/api/modules/model/profile";
import { useRoute } from "vue-router";

export default defineComponent({
	props: {
		type: {
			type: String,
			default() {
				return GatewayType.Gateway;
			}
		}
	},
	emits: [],
	setup(props) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const route = useRoute();
		enum viewType {
			deviceSchema = "deviceSchema",
			deviceProfile = "deviceProfile",
			gatewaySchema = "gatewaySchema",
			gatewayProfile = "gatewayProfile"
		}
		//设备schema
		const deviceSchema = inject<any>(SchemaNodeKey.schema);
		const deviceProfile = inject<any>(SchemaNodeKey.profile);

		const detail = reactive<any>({ detail: { type: GatewayType.Device, location: {} } });
		provide(SchemaNodeKey.detailInfo, detail);
		//网关schema
		const gatewaySchema = inject<any>(SchemaNodeKey.gatewaySchema);
		const gatewayProfile = ref<any>();
		onMounted(async () => {
			const deviceInfo = inject<any>(SchemaNodeKey.detailInfo);
			//设备页面，获取完整网关schema
			if (props.type == GatewayType.Device && deviceInfo.detail.gatewaySn) {
				const { result } = await getProfile({
					idSn: deviceInfo.detail.gatewaySn,
					productId: route.query.id
				});
				gatewayProfile.value = result;
			} else {
				gatewayProfile.value = inject<any>(SchemaNodeKey.gatewayProfile).value;
			}
			changeJson();
		});
		const state = reactive<any>({
			jsonType: props.type == GatewayType.Gateway ? viewType.gatewayProfile : viewType.deviceProfile,
			jsonData: "{}"
		});
		watch(
			() => deviceSchema.value,
			() => {
				changeJson();
			}
		);
		const changeJson = () => {
			switch (state.jsonType) {
				case viewType.deviceSchema:
					state.jsonData = JSON.stringify(deviceSchema?.value);
					break;
				case viewType.deviceProfile:
					state.jsonData = JSON.stringify(deviceProfile?.value);
					break;
				case viewType.gatewaySchema:
					state.jsonData = JSON.stringify(gatewaySchema?.value);
					break;
				case viewType.gatewayProfile:
					state.jsonData = JSON.stringify(gatewayProfile?.value);
					break;
			}
		};
		return () => {
			return (
				<div class="flex p-8" style="height: calc(100vh - 450px);	position: relative;">
					<div class="json-type-btns">
						<el-radio-group
							v-model={state.jsonType}
							onChange={() => {
								changeJson();
							}}
						>
							{props.type == GatewayType.Device ? (
								<>
									<el-radio border label={viewType.deviceProfile}>
										{proxy?.$t("prviewschemajson.radio.device_profile")}
									</el-radio>
									<el-radio border label={viewType.deviceSchema}>
										{proxy?.$t("prviewschemajson.radio.device_schema")}
									</el-radio>
								</>
							) : (
								<>
									<el-radio border label={viewType.gatewayProfile}>
										{proxy?.$t("prviewschemajson.radio.gateway_profile")}
									</el-radio>
									<el-radio border label={viewType.gatewaySchema}>
										{proxy?.$t("prviewschemajson.radio.gateway_schema")}
									</el-radio>
								</>
							)}
						</el-radio-group>
					</div>
					<JsonEditerVue data={state.jsonData} class="flex-1" style="height:100%" />
				</div>
			);
		};
	}
});
